<template>
  <div id="echarts-wrapper" ref="wrapper"></div>
</template>

<script>
// 引入echarts
import * as echarts from "echarts";
import { ref, watch } from "vue";
export default {
  props: {
    echartsData: {
      type: Object,
      default: { activityNum: [], createNum: [], monthArr: [] },
    },
  },
  setup(props) {
    const wrapper = ref(null);
    const initEcharts = () => {
      const myChart = echarts.init(wrapper.value);
      const option = {
        // color:['red','green'],
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["新访客数", "活跃人数"],
          textStyle: {
            fontSize: "0.8rem",
            color: "#595757",
          },
        },
        grid: {
          left: "5%",
          right: "5%",
          bottom: "0%",
          top: "25%",
          containLabel: true,
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: props.echartsData.monthArr,
          axisLabel: {
            fontSize: "0.8rem",
            color: "#595757",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
        },
        yAxis: {
          type: "value",
          axisLabel: {
            show: false,
          },
          splitLine: {
            //去除网格线
            show: false,
          },
        },
        series: [
          {
            name: "新访客数",
            type: "line",
            data: props.echartsData.createNum,
            smooth: true,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "bottom",
                  textStyle: {
                    fontSize: "0.7rem",
                    color: "#5164bd",
                  },
                },
              },
            },
          },
          {
            name: "活跃人数",
            type: "line",
            data: props.echartsData.activityNum,
            smooth: true,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  textStyle: {
                    fontSize: "0.7rem",
                    color: "#88c56c",
                  },
                },
              },
            },
          },
        ],
      };
      myChart.setOption(option);
      window.onresize = function () {
        myChart.resize();
      };
    };
    watch(
      () => {
        return props.echartsData;
      },
      () => {
        initEcharts();
      }
    );
    return {
      wrapper,
    };
  },
};
</script>

<style scoped>
#echarts-wrapper {
  min-width: 14.375rem;
  min-height: 9.375rem;
}
</style>